<template>
  <!-- 资产档案详情页 -->
  <div class="assetFileDetailPage">
    <CommonTitle :titleName="detailState.assetsName"></CommonTitle>
    <PublicStatistics :cardArr="cardInfo.cardArr"></PublicStatistics>
    <div class="inpuBox">
      <el-form
        :inline="true"
        :model="detailState"
        class="demo-form-inline"
        label-position="right"
        label-width="108px"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item style="width: 100%" label="区域街道">
              <el-input disabled v-model="detailState.street"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item style="width: 100%" label="资产类型">
              <el-input disabled v-model="detailState.assetsType"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item style="width: 100%" label="合作物业">
              <el-input disabled v-model="detailState.propertyCompanyName">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item style="width: 100%" label="房源总数量">
              <el-input disabled v-model="detailState.housingNum"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item style="width: 100%" label="资产建筑面积">
              <el-input disabled v-model="detailState.assetsArea"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 组件切换按钮 -->
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin-bottom: 20px"
    >
      <el-form-item v-for="(n, i) in btnStateArr" :key="i">
        <el-button
          :class="btnStatekey == i?'button_view':'button_edit'"
          type="primary"
          @click="stateChange(i)"
          >{{ n.btnName }}</el-button
        >
      </el-form-item>
    </el-form>
    <component :is="whichComponent" ref="tableCompnent"></component>
  </div>
</template>

<script setup>
import { ref, reactive, shallowRef, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { // 父组件中引入之后，子组件中无需再次引入
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElMessage,
  ElTable,
  ElTableColumn,
} from "element-plus";
import { numToFixed } from "@/common/utils/GlobalUtils";
import CommonTitle from "@/components/CommonTitle.vue";
import PublicStatistics from "@/components/PublicStatistics.vue";
import FileHistory from "./components/fileHistory.vue";
import ReceiveHistory from "./components/receiveHistory.vue";
import InvoiceHistory from "./components/invoiceHistory.vue";
import { assetFilesApi } from "@/api/assets";

// 从路由path中获取的
const router = useRouter();
const getAssetsId = router.currentRoute.value.params.assetsId;

const detailState = reactive({
  assetsName: "--",
  street: "--",
  housingNum: "--",
  assetsArea: null,
  assetsType: "--",
  propertyCompanyName: "--",
});

const cardInfo = reactive({
  cardArr: [
    {
      title: "持有期间已获得收益",
      num: "--",
      url: require("@/assets/iconImg/shouyizc.png"),
      unit: "元",
    },
    {
      title: "租房合同",
      num: "--",
      url: require("@/assets/iconImg/hetong.png"),
      unit: "个",
    },
    {
      title: "合作承租方",
      num: "--",
      url: require("@/assets/iconImg/chengzufang.png"),
      unit: "个",
    },
    {
      title: "持有期间罚金收入",
      num: "--",
      url: require("@/assets/iconImg/zichan.png"),
      unit: "元",
    },
  ],
});

// 状态切换按钮
const btnStatekey = ref(0);
const btnStateArr = ref([
  {
    btnName: "合同历史",
  },
  {
    btnName: "核收历史",
  },
  //   { // 暂时不做
  //     btnName: "开票历史",
  //   },
]);
const stateChange = (i) => {
  btnStatekey.value = i;
  switch (i) {
    case 0:
      whichComponent.value = FileHistory;
      break;
    case 1:
      whichComponent.value = ReceiveHistory;
      break;
    case 2:
      whichComponent.value = InvoiceHistory;
      break;
    default:
      break;
  }
};

// 各table组件
// 此名称必须与子组件中的ref值名称保持一致才能获取到子组件中的方法
let tableCompnent = ref(null);
let whichComponent = shallowRef(FileHistory);

// 初始化
const initDetailInfo = (id) => {
  assetFilesApi.getAssetsFileInfo(id).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      detailState.assetsName = data.asssetsName ? data.asssetsName : "--";
      detailState.street = data.street ? data.street : "--";
      detailState.assetsType =
        data.assetsType == 1
          ? "农贸市场"
          : data.assetsType == 2
          ? "商业(绿道)"
          : data.assetsType == 3
          ? "商业(商铺)"
          : data.assetsType == 4
          ? "写字楼"
          : data.assetsType == 5
          ? "综合体"
          : data.assetsType == 6
          ? "其他"
          : "--";
      detailState.housingNum = data.housingNum ? data.housingNum : "--";
      detailState.assetsArea = data.assetsArea ? data.assetsArea : "--";
      detailState.propertyCompanyName = data.propertyCompanyName
        ? data.propertyCompanyName
        : "--";
      // 数据统计
      if (data.assetsIncome) {
        cardInfo.cardArr[0].num = numToFixed(data.assetsIncome, 2).split(
          "&"
        )[0];
        cardInfo.cardArr[0].unit = numToFixed(data.assetsIncome, 2).split(
          "&"
        )[1]
          ? numToFixed(data.assetsIncome, 2).split("&")[1] + "元"
          : cardInfo.cardArr[0].unit;
      }
      if (data.contractNum) {
        cardInfo.cardArr[1].num = numToFixed(data.contractNum).split("&")[0];
        cardInfo.cardArr[1].unit = numToFixed(data.contractNum).split("&")[1]
          ? numToFixed(data.contractNum).split("&")[1] + "个"
          : cardInfo.cardArr[1].unit;
      }
      if (data.customerNum) {
        cardInfo.cardArr[2].num = numToFixed(data.customerNum).split("&")[0];
        cardInfo.cardArr[2].unit = numToFixed(data.customerNum).split("&")[1]
          ? numToFixed(data.customerNum).split("&")[1] + "个"
          : cardInfo.cardArr[2].unit;
      }
      if (data.fine) {
        cardInfo.cardArr[3].num = numToFixed(data.fine, 2).split("&")[0];
        cardInfo.cardArr[3].unit = numToFixed(data.fine, 2).split("&")[1]
          ? numToFixed(data.fine, 2).split("&")[1] + "元"
          : cardInfo.cardArr[3].unit;
      }
    }
  });
};

onMounted(() => {
  initDetailInfo(getAssetsId);
  stateChange(0);
});
</script>

<style lang="scss" scoped>
.assetFileDetailPage {
  .inpuBox {
    padding: 32px 76px 0;
    border-radius: 10px;
    border: 1px solid #e3e7f1;
    margin-bottom: 38px;
  }
}
</style>

<style lang="scss" scoped>
.assetFileDetailPage {
  .inpuBox {
    .demo-form-inline {
      .el-form-item {
        margin-bottom: 34px;
        .el-form-item__label {
          font-weight: 500;
          font-size: 16px;
          font-family: SourceHanSansMedium;
        }
        .el-form-item__content {
          .el-date-editor.el-input,
          .el-date-editor.el-input__wrapper {
            width: 100%;
            .el-input__wrapper {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
